<html>
<head>
	<title>Registro Operatori</title>
	<meta charset="UTF-8">
	
	<link href="bootstrap.min.css" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="sampleStyle.css">
	<script src="xmlLoader.js" type="text/javascript"/>
	</script>
	<script type="text/javascript"/>
		
		function loadOperatori(){
			
			//recupero i dati dal server
			var operatoriXML=loadXMLDoc("/operatori");
			var operatori=operatoriXML.getElementsByTagName("operatore");

			//creo il codice HTML della lista degli operatori 
			var newText="";
			
			for(var i=0;i<operatori.length;i++){//operatori sarà un array
				
				var operatore=operatori[i].firstChild.nodeValue;
				
				//esempio : <li onclick="loadRegistro('Angelo')">Angelo</li>
				newText=newText+"<li onclick=\"loadRegistro('"+operatore+"')\" class=\"bottone\">"+operatore+"</li>";
			}
			
			//assegno il codice html generato dinamicamente al tag ul 'listaOperatori'
			var ulOperatori=document.getElementById("listaOperatori");
			ulOperatori.innerHTML=newText;
		}
		
		function loadRegistro(operatore){
			
			var link="/registro?operatore="+operatore+"&data=300314";
			
			var registroXML=loadXMLDoc(link);
			
			var registro=registroXML.getElementsByTagName("log");
			
			
			if(registro[0]!=undefined){
				//getElementsByTagName ritorna un array, ma in questo caso avrà un solo elemento
				
				var stocks=registroXML.getElementsByTagName("stock");
				
				//var colonne=document.getElementById("colonne");
				//var innerHTMLText0="<td><div id=\"modelli\"></div></td><td><div id=\"quantita\"></div></td>";
				//colonne.innerHTML=innerHTMLText0;
				
				var innerHTMLText1="<ul>";
				for(var i=0;i<stocks.length;i++){
					var attributes=stocks[i].attributes;
					
					//alert(attributes)
					var numero=attributes.item(0).value;
					
					innerHTMLText1=innerHTMLText1 + "<li style=\"text-align: left;\"> Quantit\u00e0:"+numero;
				}
				var registro=document.getElementById("quantita");
				registro.innerHTML=innerHTMLText1;	
				
				var innerHTMLText2="<ul>";
				for(var i=0;i<stocks.length;i++){
					var attributes=stocks[i].attributes;
					
					//alert(attributes)
					var numero=attributes.item(0).value;
					
					innerHTMLText2=innerHTMLText2 + "<li style=\"text-align: left;\"> Modello:"+stocks[i].firstChild.data+"</li>";
				}
			
				var registro=document.getElementById("modelli");
				registro.innerHTML=innerHTMLText2;	
			}else{
			
				registro.innerHTML="Nessun Elemento Trovato";
			}
			
		}
		
	</script>
	
</head>
	<style>
		
		
		body {
			font-weight: bolder;
			color: green;
			background-image: url("http://slowbuddy.com/wp-content/gallery/white-wallpaper/the-best-top-desktop-hd-white-wallpapers-white-wallpaper-6.jpg");
			background-repeat:no-repeat;
		}
		
		li {
			margin-top: 3px;
			text-align: center;
		}
		td {
			text-align: center;
		}
		
		.bottone:hover{
			background-color: cyan;
		}

		.bottone {
			border: 1px solid red;
			border-radius:4px;
			background-color: azure;
			text-decoration: none;
		}
		ul {	
			list-style-type: none;
			padding-right:5px;
			padding-left:5px;
		}
	
	</style>
<body onLoad="loadOperatori();" >
	<div class="row">
		<div class="col-md-3"></div>
		<h1 class="col-md-6 text-center">Registro Operatori</h1>
	</div>
	<div class="row">
		<div class="col-md-3"></div>
		<p class="col-md-6 text-center">Clicca su un Operatore per visualizzarne il registro.</p>
	</div>
	<div class="row">
	<div class="col-md-3"></div>
	<table class="col-md-6">
		<tr>
			<td>
				<ul id="listaOperatori">
					<!-- Viene caricata dal codice Javascript!! -->
				</ul>
			</td>
			<td id="colonne" style="visibility:hidden;">
			</td>
			<td>
				<div id="modelli">
					Modelli. </br>
				</div>
			</td>
			<td>
				<div id="quantita">
					Quantità. </br>
				</div>
			</td>
		</tr>
	</table>
	</div>
</body>
</html>
